//窗口加载事件
window.addEventListener('load', function (){

  

        //获取元素
        let denglubtn2 = document.querySelector('.denglubtn2');
        let box = document.querySelector('.box');
        let hdBtn = document.querySelector('.hd-btn');
        /* console.log(hdBtn);
        console.log(box);
        console.log(btn); */

        //点击btn显示box
        denglubtn2.addEventListener('click',function(){
        /*   console.log(btn);
            console.log(123); */
            box.style.display = 'block';
        })

        //点击hdBtn隐藏box
        hdBtn.addEventListener('click',function(){
            /*  console.log(hdBtn);
            console.log(123); */
            box.style.display = 'none';
        })


        /* 
        需求：输入用户名(user)时，判断用户名长度：如果长度大于0，显示图标(delBtn)，否则隐藏
        事件类型：input(输入事件)  keyup(按键抬起)
        */
       let user = document.querySelector('#user')
       let delBtn = document.querySelector('#delBtn')
    //    console.log(delBtn);

        user.addEventListener('input',function(){
            // user.value = '';
            // console.log(user.value);
            let len = user.value.length
            if(len>0){
                delBtn.style.display = 'block'
            }
            else{
                delBtn.style.display = 'none'
            }
        })

        /* 
        需求：点击删除图标{delBtn},清空用户名（user），隐藏删除图标{delBtn}
        */
        delBtn.addEventListener('click',function(){
            user.value = '';//清空用户名
            delBtn.style.display = 'none'//隐藏
        })

        /* 
        需求：点击delEyes切换睁眼模式，且把数字（psWord）显示出来
        */
        let eyes = document.querySelector('#eyes');
        // let delEyesop = document.querySelector('#delEyesop');
        let psWord = document.querySelector('#psWord');

        psWord.addEventListener('input',function(){
            let len1 = psWord.value.length
            if(len1>0){
                eyes.style.display = 'block'
            }
            else{
                eyes.style.display = 'none'
            }
        })

        //需求：点击眼睛图标（）：奇数次点击-眼睛src变成open.png
  /*       let count = 0;
        eyes.addEventListener('click',function(){
            count++;
            if(count%2!=0){
                eyes.src='./imgs/open.png'
                psWord.type='text'
            }
            else{
                eyes.src='./imgs/close.png'
                psWord.type='password'

            }

          
        }) */
        let xz = true;//睁眼
        eyes.addEventListener('click',function(){
            if(xz){
                eyes.src='../img/open.png'
                psWord.type='text'
            }
            else{//闭眼
                eyes.src='../img/close.png'
                psWord.type='password'
            }

            xz=!xz;//取反
        })

        // 定义标杆
        let formFlag= {
            user:false,
            psWord:false
        }
        

        //需求：用户名（user）失去焦点触发验证
        user.addEventListener('blur',function(){
            //创建验证规则-正则表达式
            //规则：6-12位字母开头，后面跟着数字、字母、下划线
            let reg = /^[a-zA-Z]\w{5,11}$/

            //获取用户名
            let uVal = user.value;

            //验证
            let result = reg.test(uVal)//合法：true  不合法：false

            //判断
            if(result){
                //正确
                userMsg.textContent = ''
                user.style.border= '1px solid #ccc'
                formFlag.user = true
            }else{
                //错误
                userMsg.textContent = '6-12位字母开头，后面跟着数字、字母、下划线'
                user.style.border= '1px solid red'
                formFlag.user = false

            }
        })

        psWord.addEventListener('blur',function(){
            let reg = /^[a-zA-Z]\w{5,11}$/

            //获取用户名
            let uVal = psWord.value;

            //验证
            let result = reg.test(uVal)

            if(result){
                userMsg1.textContent = ''
                psWord.style.border= '1px solid #ccc'
                formFlag.psWord = true
            }else{
                userMsg1.textContent = '6-12位字母开头，后面跟着数字、字母、下划线'
                psWord.style.border= '1px solid red'
                formFlag.psWord = false

            }
        })


        // 验证合法
        let bt = document.querySelector('#bt')//登录按钮
        bt.addEventListener('click',function(){
            if(formFlag.user===false){//判断用户名
                userMsg.textContent = '6-12位字母开头，后面跟着数字、字母、下划线';
                user.style.border= '1px solid red';
            }else if(formFlag.psWord===false){//验证密码
                userMsg1.textContent = '6-12位字母开头，后面跟着数字、字母、下划线';
                psWord.style.border= '1px solid red';
            }else{
                //
                location.href='./success.html';
            }

        })



    })
    
    




